<template>
  <div class="com-page">
    <el-card>
      <div class="echart-con" ref="reportsRef"></div>
    </el-card>
  </div>
</template>

<script>
import { request } from "@/utils";
export default {
  components: {},
  props: {},
  data() {
    return {
      myChart: null,
    };
  },
  watch: {},
  computed: {},
  methods: {
    initChart() {
      console.log("开始初始化");
      console.log(this.$echarts);
      this.myChart = this.$echarts.init(this.$refs.reportsRef);
      const option = {
        title: {
          text: "用户来源",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
      };
      this.myChart.setOption(option);
    },
    async getData() {
      const { data: ret } = await request.get("reports/type/1");
      console.log(ret);
      const updataOption = {
        legend: ret.data.legend,
        xAxis: ret.data.xAxis,

        series: ret.data.series,
      };
      this.myChart.setOption(updataOption);
    },
  },
  created() {
    this.getData();
  },
  mounted() {
    this.initChart();
  },
};
</script>
<style lang="less" scoped>
.echart-con {
  width: 100%;
  height: 900px;
}
.el-card__body {
  height: 100%;
}
</style>